<template>
  <div class="big_box">
    <div class="map" id="mapSituation"></div>
    <van-popup
      v-model="sortIsshow"
      round
      position="top"
      class="intelligent_label_box"
    >
      <div
        v-for="(item, index) in sortList"
        :key="index"
        class="intelligent_label"
        :class="item == intelligent ? 'intelligent_label_true' : ''"
        @click="intelligentClick(item)"
      >
        {{ item.label }}
      </div>
    </van-popup>
    <div class="box">
      <div class="search_box">
        <div class="input_search">
          <van-search
            v-model="enterpriseName"
            placeholder="请输入企业名称"
            @search="onSearch"
          />
        </div>
        <div class="search_line"></div>
        <div class="intelligentSorting" @click="intelligentSort">
          <div>智能排序</div>
          <div>
            <img
              src="https://zx-1311146360.cos.ap-shanghai.myqcloud.com/qiye/1.png"
            />
          </div>
        </div>
      </div>
      <div
        class="bottom_box"
        :class="develop ? 'main_body_open' : 'main_body_down'"
      >
        <!-- <div class="touch_down_icon">
          <img src="~img/lookAround/touch_down.png" alt="" />
        </div> -->
        <div class="touch_down_icon" @click="touchDown" v-if="develop">
          <img src="~img/lookAround/touch_down.png" alt="" />
        </div>
        <div class="touch_down_icon" @click="touchUp" v-if="!develop">
          <img src="~img/lookAround/touch_up.png" alt="" />
        </div>
        <div class="total_box">
          <div>附近企业</div>
          <div>
            共发现 <span class="total_num">{{ this.total }}</span> 家企业
          </div>
        </div>

        <!-- <van-list
          class="nav_box"
          @load="onLoad"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
          <corpList :originList="originList"></corpList>
          <van-loading type="spinner" v-if="originList.length == 0" style="" />
        </van-list> -->
        <div ref="mescroll" class="nav_box">
          <corpList :originList="originList"></corpList>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mapConfig from "./mixins/mapConfig";
import { lookAroundV2, fullAmountCorp } from "@/interfaces/lookAround/index.js";
import corpList from "../../components/lookAround/corpList.vue";
import MeScroll from "mescroll.js";
import "mescroll.js/mescroll.min.css";
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [mapConfig],
  components: { corpList },
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      enterpriseName: "",
      originList: [],
      develop: true,
      loading: "",
      finished: "",
      total: 0,
      pageNum: 1,
      pageSize: 20,
      extraObj: {},
      circleIsshow: true, //用来判断地图中心圆范围是否显示的参数
      type: "",
      sortIsshow: false,
      intelligent: {
        sortColumn: "",
        sortRule: "",
      },
      sortList: [
        {
          sortColumn: "distance",
          sortRule: "asc",
          label: "距离由近及远",
        },
        {
          sortColumn: "distance",
          sortRule: "desc",
          label: "距离由远及近",
        },
        {
          sortColumn: "creditScore",
          sortRule: "desc",
          label: "评分从高到低",
        },
        {
          sortColumn: "creditScore",
          sortRule: "asc",
          label: "评分从低到高",
        },
        {
          sortColumn: "esdate",
          sortRule: "asc",
          label: "成立日期由远及近",
        },
        {
          sortColumn: "esdate",
          sortRule: "desc",
          label: "成立日期由近及远",
        },
      ],
    };
  },
  computed: {},
  watch: {
    develop: {
      handler(e) {
        console.log(e, "监听成功");
        if (e) {
          let that = this;
          setTimeout(function (name, gender) {
            console.log("开始移动");
            that.mapInstance.panBy(0, -280);
          }, 500);
        } else {
          let that = this;
          setTimeout(function (name, gender) {
            console.log("开始移动");
            that.mapInstance.panBy(0, 280);
          }, 500);
        }
      },
    },
  }, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    console.log(this.$route, "rout");
    let that = this;
    setTimeout(function (name, gender) {
      console.log("开始移动");
      that.mapInstance.panBy(0, -280);
    }, 0);
    if (this.$route.query.type) {
      this.type = this.$route.query.type;
    }
  },
  mounted() {
    this.initMap();
    this.getList();
    // 创建MeScroll对象:为避免配置的id和父组件id重复,这里使用ref的方式初始化mescroll
    this.mescroll = new MeScroll(this.$refs.mescroll, {
      // 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.
      // down: {
      // 	auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
      // 	callback: this.downCallback, // 下拉刷新的回调
      // },
      up: {
        auto: true, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
        page: {
          num: 0, // 当前页码,默认1,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量
        },
        noMoreSize: 5000, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        // toTop: {
        //   // 配置回到顶部按钮
        //   src: require("../../assets/imgs/marketingExtension/go_top.svg"),
        //   offset: 1000,
        // },
      },
    });
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    intelligentClick(item) {
      this.intelligent = item;
      this.sortIsshow = false;

      this.onSearch();
      console.log(this.intelligent, "this.intelligent");
    },
    intelligentSort() {
      this.sortIsshow = true;
    },
    touchDown() {
      this.develop = !this.develop;
    },
    touchUp() {
      this.develop = !this.develop;
    },
    onSearch() {
      this.pageNum = 1;
      this.originList = [];
      this.getList();
    },
    onLoad() {
      this.loading = true;
      console.log(1);
      this.pageNum = this.pageNum + 1;
      this.getList();
    },
    // 列表接口
    async getList() {
      this.finished = false;

      const params = {
        distance: "1",
        needToken: true,
        enterpriseName: this.enterpriseName,
        pageBO: {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        },

        __proto__: Object,
        sortColumn: this.intelligent.sortColumn,
        sortRule: this.intelligent.sortRule,
        userLat: 31.26839516978756,
        userLng: 120.63862787231987,
      };
      if (this.type) {
        // this.extraObj = { [this.type]: "1" };
        this.$set(this.extraObj, [this.type], "1");
      }
      // if (this.intelligent) {
      //   this.$set(this.extraObj, "sortColumn", this.intelligent.sortColumn);
      //   this.$set(this.extraObj, "sortRule", this.intelligent.sortRule);
      // }
      const res = await lookAroundV2({ ...params, ...this.extraObj });
      console.log(params, this.extraObj, "查询条件");
      let { list, total } = res;
      if (this.pageNum <= res.pages) {
        // ==========================================
        // 设置不同的标题背景色
        for (let i in list) {
          let color = "#D99D9A";
          if (i % 4 === 0) {
            color = "#8BCBB8";
          } else if (i % 3 === 0) {
            color = "#99C1F2";
          } else if (i % 5 === 0) {
            color = "#B8AAD6";
          } else {
            color = "#D99D9A";
          }
          this.$set(list[i], "background", color);
        }
        // =======================================================
        this.originList = this.originList.concat(list);
        this.pushMarker();
        this.total = total;
        this.loading = false;
      } else {
        this.finished = true;
        this.pushMarker();
      }
    },
    /* 下拉刷新的回调 */
    downCallback() {
      console.log("自动下拉刷新 ");
      // console.log('this.mescroll.version=' + this.mescroll.version);
      // 联网加载数据

      this.getListDataFromNet(
        1,
        20,
        (data) => {
          console.log(data, "data");
          this.originList = data;
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            this.mescroll.endSuccess(0); // 结束下拉刷新,无参
          });
        },
        () => {
          // 联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        }
      );
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page) {
      console.log("下拉了");
      // console.log('自动上拉记载');
      // 联网加载数据
      this.getListDataFromNet(
        page.num,
        20,
        (curPageData) => {
          // 添加列表数据
          if (page.num == 1) {
            this.originList = curPageData;
          } else {
            this.originList = this.originList.concat(curPageData);
          }
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            this.mescroll.endSuccess(curPageData.length);
          });
        },
        () => {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          this.mescroll.endErr();
        }
      );
    },
    async getListDataFromNet(
      pageNum,
      pageSize,
      successCallback,
      errorCallback
    ) {
      // 上拉加载返回的数据

      const params = {
        distance: "1",
        needToken: true,
        enterpriseName: this.enterpriseName,
        pageBO: {
          pageSize: this.pageSize,
          pageNum: pageNum,
        },

        __proto__: Object,
        sortColumn: this.intelligent.sortColumn,
        sortRule: this.intelligent.sortRule,
        userLat: 31.26839516978756,
        userLng: 120.63862787231987,
      };
      if (this.type) {
        // this.extraObj = { [this.type]: "1" };
        this.$set(this.extraObj, [this.type], "1");
      }
      const res = await lookAroundV2({ ...params, ...this.extraObj });

      // =======================================================
      //  公司简称背景色设置
      let { list, total } = res;
      for (let i in list) {
        let color = "#D99D9A";
        if (i % 4 === 0) {
          color = "#8BCBB8";
        } else if (i % 3 === 0) {
          color = "#99C1F2";
        } else if (i % 5 === 0) {
          color = "#B8AAD6";
        } else {
          color = "#D99D9A";
        }
        this.$set(list[i], "background", color);
      }
      // =======================================================
      successCallback && successCallback(res.list);
      this.pushMarker();

      console.log(this.originList, "列表数据");
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.big_box {
  width: 100%;
  height: 100%;
  // background-color: aquamarine;
}

.map {
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
}
::v-deep .amap-logo {
  display: none !important;
}
::v-deep .amap-copyright {
  display: none !important;
}
.box {
  width: 100%;
  height: 100%;
  //   background-color: red;
  margin: auto;
  position: relative;
  // z-index: 99;
  overflow: hidden;
}
.search_box {
  width: 340px;
  height: 54px;
  margin: auto;
  margin-top: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  background-color: white;
  position: relative;
  z-index: 3;
}
.input_search {
  width: 75%;
}
.search_line {
  width: 3px;
  height: 28px;
  background-color: #f7f8fa;
}

.bottom_box {
  position: absolute;
  bottom: 0;
  height: 81%;
  width: 100%;
  background-color: rgba(165, 42, 42, 0);
  display: flex;
  flex-flow: column;
}
.touch_down_icon {
  text-align: center;
  img {
    width: 30px;
  }
}
.total_box {
  width: 100%;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  background-color: #f7f9ff;
}
.total_num {
  color: #ec6c67;
}
.nav_box {
  width: 100%;
  flex: 1;
  background-color: white;
  margin-top: 5px;
  overflow: auto;
}
.main_body_open {
  // overflow: hidden;
  position: absolute;
  bottom: 0;
  height: 81%;
  transition: all 0.6s;
  z-index: 3;
}
.main_body_down {
  height: 60px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  transition: all 0.6s;
  z-index: 3;
}
.van-loading {
  text-align: center;
  line-height: 200px;
}
.intelligentSorting {
  display: flex;
  color: #3282e4;
  font-size: 14px;
  margin-left: 5px;
  img {
    width: 13px;
    height: 13px;
    margin-top: 3.5px;
    margin-left: 2px;
  }
}
.intelligent_label_box {
  padding: 10px 0;
}
.intelligent_label {
  font-size: 14px;
  padding: 7px 20px;
}
.intelligent_label_true {
  color: #2e86d0;
}
</style>
